<template>  
  <div>  
    <Title :title="title"></Title>  
    <div ref="gaugeContainer" style="height: 180px;"></div>  
  </div>  
</template>  
  
<script setup>  
import { onMounted, onUnmounted, ref } from 'vue';  
import Title from './Title.vue';  
import { Gauge } from '@antv/g2plot';  
  
const title = ref('风速风向监测');  
const gaugeContainer = ref(null);  
let gaugeInstance = null;  
  
// 初始化仪表盘图的函数  
function initGauge() {  
  if (gaugeContainer.value) {  
    gaugeInstance = new Gauge(gaugeContainer.value, {  
      percent: 0.75, // 假设这是你的初始值，实际应根据数据动态设置  
      range: {  
        color: '#30BF78',  
      },  
      // 其他配置...  
      statistic: {  
        content: {  
          formatter: ({ percent }) => `Rate: ${(percent * 100).toFixed(0)}%`,  
          style: {  
            color: 'rgba(0,0,0,0.65)',  
            fontSize: 48,  
          },  
        },  
      },  
    });  
    gaugeInstance.render();  
  }  
}  
  
onMounted(() => {  
  initGauge();  
});  
</script>  
  
<style scoped>  
/* 样式可以根据需要添加 */  
</style>